<template>
  <view class="input-wrapper" :class="{ 'input-wrapper-error': error }">
    <view v-if="label" class="input-label">
      <text>{{ label }}</text>
      <text v-if="required" class="required-mark">*</text>
    </view>
    
    <view class="input-container" :class="{ 'input-focused': focused, 'input-disabled': disabled }">
      <view v-if="prefixIcon" class="input-prefix">
        <text class="iconfont" :class="prefixIcon"></text>
      </view>
      
      <input
        v-if="type !== 'textarea'"
        class="input-field"
        :type="inputType"
        :value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @confirm="handleConfirm"
      />
      
      <textarea
        v-else
        class="input-field textarea-field"
        :value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        :auto-height="autoHeight"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
      ></textarea>
      
      <view v-if="suffixIcon || showPassword" class="input-suffix">
        <text
          v-if="showPassword"
          class="iconfont password-toggle"
          :class="passwordVisible ? 'icon-eye' : 'icon-eye-off'"
          @click="togglePassword"
        ></text>
        <text v-else-if="suffixIcon" class="iconfont" :class="suffixIcon"></text>
      </view>
      
      <view v-if="clearable && modelValue && !disabled" class="input-clear" @click="handleClear">
        <text class="iconfont icon-close"></text>
      </view>
    </view>
    
    <view v-if="error || helperText" class="input-helper">
      <text class="helper-text" :class="{ 'error-text': error }">{{ error || helperText }}</text>
    </view>
    
    <view v-if="showCount && maxlength" class="input-count">
      <text class="count-text">{{ (modelValue || '').length }}/{{ maxlength }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

interface Props {
  modelValue?: string | number;
  type?: 'text' | 'password' | 'number' | 'email' | 'tel' | 'textarea';
  label?: string;
  placeholder?: string;
  disabled?: boolean;
  readonly?: boolean;
  required?: boolean;
  clearable?: boolean;
  showPassword?: boolean;
  showCount?: boolean;
  maxlength?: number;
  prefixIcon?: string;
  suffixIcon?: string;
  error?: string;
  helperText?: string;
  autoHeight?: boolean;
}

interface Emits {
  (e: 'update:modelValue', value: string | number): void;
  (e: 'focus', event: Event): void;
  (e: 'blur', event: Event): void;
  (e: 'confirm', event: Event): void;
  (e: 'clear'): void;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  type: 'text',
  label: '',
  placeholder: '',
  disabled: false,
  readonly: false,
  required: false,
  clearable: false,
  showPassword: false,
  showCount: false,
  maxlength: undefined,
  prefixIcon: '',
  suffixIcon: '',
  error: '',
  helperText: '',
  autoHeight: false
});

const emit = defineEmits<Emits>();

const focused = ref(false);
const passwordVisible = ref(false);

const inputType = computed(() => {
  if (props.type === 'password') {
    return passwordVisible.value ? 'text' : 'password';
  }
  return props.type;
});

const handleInput = (event: any) => {
  const value = event.detail.value;
  emit('update:modelValue', value);
};

const handleFocus = (event: Event) => {
  focused.value = true;
  emit('focus', event);
};

const handleBlur = (event: Event) => {
  focused.value = false;
  emit('blur', event);
};

const handleConfirm = (event: Event) => {
  emit('confirm', event);
};

const handleClear = () => {
  emit('update:modelValue', '');
  emit('clear');
};

const togglePassword = () => {
  passwordVisible.value = !passwordVisible.value;
};
</script>

<style lang="scss" scoped>
.input-wrapper {
  width: 100%;
}

.input-label {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-xs);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  
  .required-mark {
    color: var(--color-error);
    margin-left: 2px;
  }
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  transition: all 0.2s ease;
  
  &.input-focused {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
  }
  
  &.input-disabled {
    background-color: var(--color-divider);
    cursor: not-allowed;
  }
}

.input-wrapper-error .input-container {
  border-color: var(--color-error);
  
  &.input-focused {
    box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.1);
  }
}

.input-field {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--color-text-primary);
  outline: none;
  
  &::placeholder {
    color: var(--color-text-disabled);
  }
  
  &:disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }
}

.textarea-field {
  min-height: 80px;
  resize: none;
  line-height: 1.5;
}

.input-prefix,
.input-suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-sm);
  color: var(--color-text-secondary);
  font-size: 16px;
}

.input-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: var(--spacing-xs);
  color: var(--color-text-disabled);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease;
  
  &:hover {
    background-color: var(--color-divider);
    color: var(--color-text-secondary);
  }
}

.password-toggle {
  cursor: pointer;
  transition: color 0.2s ease;
  
  &:hover {
    color: var(--color-primary);
  }
}

.input-helper {
  margin-top: var(--spacing-xs);
}

.helper-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  
  &.error-text {
    color: var(--color-error);
  }
}

.input-count {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-xs);
}

.count-text {
  font-size: 12px;
  color: var(--color-text-disabled);
}
</style>